<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/right.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/vue-router.min-2.7.0.js"></script>
    <script src="assets/axios.min.js"></script>
</head>
<body>
    <div id="app" class="container">
        <div class="row" style="background-color: white; height: 60px; padding: 13px; border: none; border-radius: 8px;">
            <div class="col-md-1 " style="margin-top: 6px">
                <span style="font-size: 15px;">房号：</span>
            </div>
            <div class="col-md-2">
                <input type="text" v-model="numbers" placeholder="house" class="form-control"/>
            </div>
            <div class="col-md-4">
                <button style="margin-left: 30px;width: 80px;float: left" @click="doQuert" class="btn btn-info">查询</button>
                <button style="margin-left: 30px;width: 80px;float: left" @click="reset" class="btn btn-default">重置</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12" style="height: 50px; line-height: 50px;">
                <button class="btn btn-info" @click="doAdd">新增</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-striped">
                    <caption>房屋列表</caption>
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>房号</th>
                        <th>面积</th>
                        <th>入住时间</th>
                        <th>楼号</th>
                        <th>单元</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="h in houseList">
                        <td>{{h.id}}</td>
                        <td>{{h.numbers}}</td>
                        <td>{{h.area}}</td>
                        <td>{{h.intoDate}}</td>
                        <td>{{h.buildingNumber}}</td>
                        <td>{{h.units}}</td>
                        <td>
                            <button class="btn btn-primary" @click="doUpdate(h.id)">修改</button>
                            <button class="btn btn-danger" @click="doDelete(h.id)">删除</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <ul class="pagination" v-for="p in pageNum">
                    <li v-if="p == pageIndex" class="active"><a @click="doGO(p)">{{p}}</a></li>
                    <li v-else="p == pageIndex"><a @click="doGO(p)">{{p}}</a></li>
                </ul>
            </div>
        </div>

    </div>
    <script>
        new Vue({
            el: '#app',
            data: {

                numbers:null,
                //用于分页
                pageIndex:1,
                pageSize:6,
                pageNum:0,
                //用于显示列表
                houseList:null

            },
            methods: {
                doGO(p){
                    this.pageIndex=p;
                    var uid = localStorage.getItem("uid");
                    var url='http://localhost:8080/house/list?pageIndex='+this.pageIndex+'&pageSize='+this.pageSize+'&number='+this.numbers+'&uid='+uid;
                    axios.get(url).then(response => {

                        if(response.data.code==200){
                            this.houseList=response.data.data;
                            this.pageNum=Math.ceil(response.data.pageTotal/this.pageSize);
                        }else {
                            alert("没有查到任何房屋信息");
                            this.houseList=null;
                            this.pageNum=0;
                        }
                    });
                },
                doAdd(){
                    window.parent.main_right.location.href = "house_add_update.html";
                },
                doUpdate(id){
                    window.parent.main_right.location.href = "house_add_update.html?id="+id;
                },
                doDelete(id){
                    var uid = localStorage.getItem("uid");
                    var url='http://localhost:8080/house/delete?id='+id+'&uid='+uid;
                    axios.get(url).then(response =>{
                        alert(response.data.msg);
                        this.doGo(this.pageIndex);
                    });

                },
                doQuert(){
                    this.doGO(1);
                },
                reset(){
                    this.numbers=null;
                    this.pageIndex=1;
                    this.pageSize=6;
                    this.pageNum=0;
                    this.houseList=null;
                    this.doGO(1);
                }
            },
            created: function () {
                this.doGO(1);
            }
        });
    </script>
</body>
</html>